<template>
	<BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter destroyOnClose title="编辑检测信息" :width="900"
		@ok="handleSubmit">
		<a-row>
			<a-col :span="24">
				<a-card :loading="loading" :bordered="false" title="订单/住宿/保险/合同" :style="{ marginTop: '10px' }">
					<!-- 一条数据，支持安排酒店-->
					<a-row>
						<a-col :span="12">
							<ul>
								<h3>订单</h3>
								<li class="li"><label class="title">订单状态：</label><span class="text">
										{{order.stats == 'Join' ? '已入团' :''}}</span>
								</li>
								<li class="li"><label class="title">联系人：</label><span class="text ">
										{{order.extinfor?.contactName}}--{{order.extinfor?.contactTel}}</span>
								</li>
								<li class="li"><label class="title">报名时间：</label><span class="text ">
										{{order.createtime}}</span>
								</li>
								<li class="li"><label class="title">出发时间：</label><span class="text ">
										{{order.createtime}}</span>
								</li>
								<li class="li"><label class="title">付款金额：</label><span class="text colorRed">
										{{order.originprice}}￥</span>
								</li>
								<li class="li"><label class="title">上车地点：</label><span class="text">
										{{order.upCarPoint?.address.split(',')[1]}}</span>
								</li>
							</ul>
						</a-col>
						<a-col :span="12">
							<ul>
								<h3>住宿</h3>
								<li class="li"><label class="title">住宿类型：</label><span class="text">
										{{room.leveltitle}}</span>
								</li>
								<li class="li"><label class="title">支付金额：</label><span class="text colorRed">
										{{room.price}}￥</span>
								</li>
								<h3>保险</h3>
								<li class="li"><label class="title">保险类型：</label><span class="text">
										{{insurance?.title}}</span>
								</li>
								<li class="li"><label class="title">已支付价格：</label><span class="text">
										{{insurance?.perprice}}</span>
								</li>
								<h3>合同</h3>
								<li class="li"><label class="title">侣途合同：</label><a>未签</a>
								</li>
								<li class="li"><label class="title">旅游合同：</label> <a>未签</a>
								</li>
							</ul>
						</a-col>
					</a-row>

				</a-card>
			</a-col>
		</a-row>
		<!-- 报名用户信息 -->
		<a-row>
			<a-col :span="24">
				<a-card :loading="loading" :bordered="false" title="报名用户信息" :style="{ marginTop: '10px' }">
					<!-- 表格，退款、取消等-->
					<div style="overflow:auto;width:100%">
						<a-table style="white-space:nowrap" :columns="usersColumns" :dataSource="users || []"
							:pagination="false">
							<template #action="{ record }"><!-- :dropDownActions="getDropDownAction(record)"  -->
								<TableAction :actions="operationActionsUsers(record)" />
							</template>
						</a-table>
					</div>
				</a-card>
			</a-col>
		</a-row>
		<a-row>
			<a-col :span="24">
				<a-card :loading="loading" :bordered="false" title="增值产品" :style="{ marginTop: '10px' }">
					<!-- 列表，支持退款（退产品）-->
					<div style="overflow:auto;width:100%">
						<a-table style="white-space:nowrap" :columns="pdtsColumns" :dataSource="pdts || []"
							:pagination="false">
							<template #action="{ record }"><!-- :dropDownActions="getDropDownAction(record)" -->
								<TableAction :actions="operationActionsPdt(record)" />
							</template>
						</a-table>
					</div>
				</a-card>
			</a-col>
		</a-row>


		<!-- 报名用户信息 -->
		<BasicForm @register="registerForm">

		</BasicForm>
	</BasicDrawer>
</template>

<script lang="ts" setup>
	import { ref, computed, unref, watchEffect, toRaw } from 'vue';
	import { useUserStoreWithOut } from '/@/store/modules/user';
	import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
	import { BasicForm, useForm } from '/@/components/Form/index';
	import { BasicTable, useTable, TableAction } from '/@/components/Table';
	import { formSchema, usersColumns, pdtsColumns } from './index.data';
	import { render, formattingMin, formattingDay } from '/@/utils/common/renderUtils';
	// import { editOrderSite } from './index.api';
	// Emits声明
	const emit = defineEmits(['register', 'submit', 'entryType']);
	const isUpdate = ref(true);
	const parentSid = ref('' as String)
	const room = ref({} as Object)
	const order = ref({} as Object)
	const insurance = ref({} as Object)
	const users = ref([] as Array<any>)
	const pdts = ref([] as Array<any>)

	const userInfo = computed(() => {
		const userStore = useUserStoreWithOut();
		return userStore.getUserInfo;
	});

	//表单配置
	const [registerForm, { setProps, resetFields, setFieldsValue, getFieldsValue, validate }] = useForm({
		//labelWidth: 150,
		schemas: formSchema,
		showActionButtonGroup: false,
		baseColProps: { span: 12 },
		labelWidth: 120
	});
	//表单赋值
	const [registerDrawer, { closeDrawer, setDrawerProps }] = useDrawerInner(async (data) => {
		//重置表单
		room.value = data.res.room
		insurance.value = data.res.insurance
		users.value = data.res.users
		pdts.value = data.res.pdts
		order.value = data.res
		order.value.createtime = formattingMin(order.value.createtime)
		order.value.extinfor = JSON.parse(order.value.extinfor)

		console.log('--->139--->', order.value)

		setDrawerProps({
			confirmLoading: false,
			showCancelBtn: !!data?.showFooter, showOkBtn: !!data?.showFooter,
			// canFullscreen: false
		});
		// 	//表单赋值
		/* 	await setFieldsValue({
				...data.record,
				//jdry: userInfo?.value?.ryXh || '',
			}); */
		// }
		// 隐藏底部时禁用整个表单
		// setProps({ disabled: !data?.showFooter })
	});

	function operationActionsUsers(record) {
		return [
			{
				label: '编辑',
				onClick: handleEdit.bind(null, record),
			}
		]
	}
	
	function operationActionsPdt(record) {
		return [
			{
				label: '退款',
				onClick: handleEdit.bind(null, record),
			}
		]
	}

	function handleEdit() {

	}


	function getDropDownAction(record) {
		return [
			{
				label: '详情',
				onClick: handleDetail.bind(null, record),
			}, {
				label: '删除',
				popConfirm: {
					title: '是否确认删除',
					confirm: handleDelete.bind(null, record),
					placement: 'topLeft',
				}
			}
		]
	}

	function handleDelete(record : Recordable) {

	}
	function handleDetail(record : Recordable) {
		/* 	openModal(true, {
				record,
				isUpdate: true,
				showFooter: false,
			}); */
	}

	//设置标题
	// const title = computed(() => (!unref(isUpdate) ? '编辑检测信息' : '编辑'));
	//表单提交事件
	async function handleSubmit(v) {
		try {
			let values = await validate();
			setDrawerProps({ confirmLoading: true });
			// // //提交表单
			// await editOrderSite(values);
			//刷新列表
			emit('submit', { values, sid: parentSid.value });
		} finally {
			setDrawerProps({ confirmLoading: false });
		}
	}
</script>

<style lang="less" scoped>
	/** 时间和数字输入框样式 */
	:deep(.ant-input-number) {
		width: 100%
	}

	:deep(.ant-calendar-picker) {
		width: 100%
	}

	.margin-l-th {
		margin-left: 10px;
	}

	.colorRed {
		color: red;
	}

	.title {
		font-weight: 500;
	}

	h3 {
		font-weight: 700;
	}
</style>